<template>
  <page-body>
    <view class="page">
      <view class="flex align-stretch justify-between benben-position-layout flex jobDirect_flex_0"
        :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
        <view class='flex align-center justify-between flex-sub jobDirect_fd0_0'>
          <view class='flex align-center flex-sub' @tap.stop="getAdd" data-type="navigateTo"
            :data-url="`/pages/tabBar/home/chooseCitye`">
            <image class='jobDirect_fd0_0_c0_c0' mode="aspectFit" :src='STATIC_URL+"48.png"'></image>
            <view class='text-cut ' style="width: 200rpx;">

              {{cityname || '请选择'}}
              <!-- <image @click.stop="clearAddress" class='' style="width: 32rpx;height: 32rpx;margin-left: 8rpx;"
                mode="aspectFit" :src=' STATIC_URL+"133.png"'></image> -->
            </view>
          </view>
          <view class='flex flex-wrap align-center flex-sub'>
            <text class='jobDirect_fd0_0_c1_c0'>岗位直聘</text>
          </view>
          <view class='flex align-center'>
            <view class='flex flex-wrap align-center justify-center jobDirect_fd0_0_c2_c0'>
            </view>
          </view>
        </view>

      </view>
      <view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
      <!---flex布局flex布局开始-->
      <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout">
        <view class='flex flex-wrap align-center justify-between jobDirect_fd1_0'>
          <view class='flex flex-wrap align-center'>
            <image class='jobDirect_fd1_0_c0_c0' mode="aspectFit" :src='STATIC_URL+"162.png"'></image>

            <input class='jobDirect_fd1_0_c0_c1' type="text" placeholder="搜索想找的职位/公司" v-model="keywords"
              @confirm="getListFunc()" placeholder-class="text-999 text-df" />
          </view>
          <view @click.stop="getListFunc()" class='flex flex-wrap align-center justify-center jobDirect_fd1_0_c1'>
            <text>搜索</text>
          </view>
        </view>
      </view>

      <!---flex布局flex布局结束-->
      <!---首页房源列表flex布局开始-->
      <view class="flex flex-direction align-stretch benben-flex-layout jobDirect_flex_2">
        <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout askingResources_flex_2">
          <benben-down-menu ref="downMenu1699932952330"
            class='flex-direction flex-wrap align-stretch flex askingResources_fd2_0' v-model="is_droup" :auto='false'
            :z-index='99' mark-color='#000'>
            <view class='flex flex-wrap align-center justify-between askingResources_fd2_0_c1'>
              <view class='flex flex-wrap align-center' @tap.stop="stateSwitchingFunc(1)">
                <text class='askingResources_fd2_0_c0_c0_c0_c1_c0' v-if=" state!='1'">工作类型</text><text
                  class='askingResources_fd2_0_c1_c0_c0_1' v-if=" state=='1'">工作类型</text>
                <image class='askingResources_fd2_0_c1_c0_c1' mode="aspectFit" :src='STATIC_URL+"178.png"'
                  v-if=" state!='1'"></image>
                <image class='askingResources_fd2_0_c1_c0_c1' mode="aspectFit" :src='STATIC_URL+"179.png"'
                  v-if=" state=='1'"></image>
              </view>
              <view class='flex flex-wrap align-center' @tap.stop="stateSwitchingFunc(2)">
                <text class='askingResources_fd2_0_c0_c0_c0_c1_c0' v-if=" state!='2'">工资</text><text
                  class='askingResources_fd2_0_c1_c0_c0_1' v-if=" state=='2'">工资</text>
                <image class='askingResources_fd2_0_c1_c0_c1' mode="aspectFit" :src='STATIC_URL+"178.png"'
                  v-if=" state!='2'"></image>
                <image class='askingResources_fd2_0_c1_c0_c1' mode="aspectFit" :src='STATIC_URL+"179.png"'
                  v-if=" state=='2'"></image>
              </view>
              <view class='flex flex-wrap align-center' @tap.stop="stateSwitchingFunc(3)">
                <text class='askingResources_fd2_0_c0_c0_c0_c1_c0' v-if=" state!='3'">是否兼职</text><text
                  class='askingResources_fd2_0_c1_c0_c0_1' v-if=" state=='3'">是否兼职</text>
                <image class='askingResources_fd2_0_c1_c0_c1' mode="aspectFit" :src='STATIC_URL+"178.png"'
                  v-if=" state!='3'"></image>
                <image class='askingResources_fd2_0_c1_c0_c1' mode="aspectFit" :src='STATIC_URL+"179.png"'
                  v-if=" state=='3'"></image>
              </view>
            </view>

            <template #popup>
              <!--   :class="state==2 || state==3 || state==5 ? 'active' : ''" -->
              <view class='flex flex-direction flex-wrap align-stretch askingResources_fd2_0_c0'>
                <!-- 工作类型1 -->
                <view class='flex flex-direction flex-wrap align-center askingResources_fd2_0_c0_c0' v-if=" state=='1'">
                  <benben-select-diy ref="showSelectPopup1699950843741"
                    class-name='flex flex-direction align-center flex' :items.sync="typeaarr" v-model="job_type"
                    @change="search()" default-type="kvalue" default-label="name" :allow-cancel='false' type="radio"
                    :disabled='false'>
                    <template v-for='(item,key0) in typeaarr'>
                      <view v-if="item.isSelected" class='flex align-center flex askingResources_fd2_0_c0_c0_c0_c0'
                        :key="key0" @tap="$refs.showSelectPopup1699950843741.tapHandle(key0)">
                        <text class='askingResources_fd2_0_c0_c0_c0_c0_c0'>{{item.name}}</text>
                      </view>
                      <view v-else class='flex flex askingResources_fd2_0_c0_c0_c0_c0' :key="key0"
                        @tap="$refs.showSelectPopup1699950843741.tapHandle(key0)">
                        <text class='askingResources_fd2_0_c0_c0_c0_c1_c0'>{{item.name}}</text>
                      </view>
                    </template></benben-select-diy>
                </view>
                <!-- 工资2 -->
                <view class='flex flex-direction flex-wrap align-center askingResources_fd2_0_c0_c0' v-if=" state=='2'">
                  <benben-select-diy ref="showSelectPopup1699950843741"
                    class-name='flex flex-direction align-center flex' :items.sync="salaryrange"
                    v-model="jobsalaryrange_id" @change="search()" default-type="aid" default-label="name"
                    :allow-cancel='false' type="radio" :disabled='false'>
                    <template v-for='(item,key0) in salaryrange'>
                      <view v-if="item.isSelected" class='flex align-center flex askingResources_fd2_0_c0_c0_c0_c0'
                        :key="key0" @tap="$refs.showSelectPopup1699950843741.tapHandle(key0)">
                        <text class='askingResources_fd2_0_c0_c0_c0_c0_c0'>{{item.min_max}}</text>
                      </view>
                      <view v-else class='flex flex askingResources_fd2_0_c0_c0_c0_c0' :key="key0"
                        @tap="$refs.showSelectPopup1699950843741.tapHandle(key0)">
                        <text class='askingResources_fd2_0_c0_c0_c0_c1_c0'>{{item.min_max}}</text>
                      </view>
                    </template></benben-select-diy>
                </view>
                <!-- 是否兼职 4 -->
                <view class='flex flex-direction flex-wrap align-center askingResources_fd2_0_c0_c0' v-if=" state=='3'">
                  <benben-select-diy ref="showSelectPopup1699950843741"
                    class-name='flex flex-direction align-center flex' :items.sync="jobarr" v-model="part_job"
                    @change="search()" default-type="kvalue" default-label="name" :allow-cancel='false' type="radio"
                    :disabled='false'>
                    <template v-for='(item,key0) in jobarr'>
                      <view v-if="item.isSelected" class='flex align-center flex askingResources_fd2_0_c0_c0_c0_c0'
                        :key="key0" @tap="$refs.showSelectPopup1699950843741.tapHandle(key0)">
                        <text class='askingResources_fd2_0_c0_c0_c0_c0_c0'>{{item.name}}</text>
                      </view>
                      <view v-else class='flex flex askingResources_fd2_0_c0_c0_c0_c0' :key="key0"
                        @tap="$refs.showSelectPopup1699950843741.tapHandle(key0)">
                        <text class='askingResources_fd2_0_c0_c0_c0_c1_c0'>{{item.name}}</text>
                      </view>
                    </template></benben-select-diy>
                </view>
              </view>

            </template>
          </benben-down-menu>
        </view>
        <view v-if="!is_droup" class='flex align-stretch jobDirect_fd2_0' v-for="(item,index) in dataList" :key="index"
          @tap.stop="handleJumpDiy" data-type="navigateTo"
          :data-url="`/pages/homePage/directDetail/directDetail?aid=${item.aid}`">
          <view class='flex flex-wrap align-start jobDirect_fd2_0_c0'>
            <image class='jobDirect_fd2_0_c0_c0' mode="aspectFill" :src='item.images[0]'></image>
          </view>
          <view class='flex flex-direction flex-wrap align-stretch flex-sub jobDirect_fd2_0_c1'>
            <view class='flex flex-wrap align-center justify-between'>
              <text class='jobDirect_fd2_0_c1_c0_c0'>{{item.job_type_name}}</text>
              <text class='jobDirect_fd2_0_c1_c0_c1'>{{item.create_time}}</text>
            </view>
            <view class='flex flex-wrap align-center jobDirect_fd2_0_c1_c1'>
              <text class='jobDirect_fd2_0_c1_c1_c0'>{{item.intended_wage}}</text>
              <text class='jobDirect_fd2_0_c1_c1_c1'>元/{{item.settle_type_name}}</text>
            </view>
            <view class='flex flex-wrap align-center jobDirect_fd2_0_c1_c2'>
              <view class='text-cut-2 jobDirect_fd2_0_c1_c2_c0' style="width: 430rpx;">
                {{item.content}}
              </view>
            </view>
            <view class='flex flex-wrap align-center jobDirect_fd2_0_c1_c3'>
              <text class='jobDirect_fd2_0_c1_c3_c0' v-if="item.part_job_name">{{item.part_job_name}}</text>
              <text class='jobDirect_fd2_0_c1_c3_c0' v-if="item.job_education_name">{{item.job_education_name}}</text>
              <text class='jobDirect_fd2_0_c1_c3_c0' v-if="item.job_years_name">{{item.job_years_name}}</text>
            </view>
            <view class='flex flex-wrap align-center'>
              <text class='jobDirect_fd2_0_c1_c4_c0'>{{item.company_name || '个人发布'}}</text>
            </view>
          </view>
        </view>
      </view>
      <fu-empty :pagingListLoadedAll="pagingListLoadedAll" :pagingListNoListData="pagingListNoListData"
        :listDataLength="listDataLength" :isLoadInit="isLoadInit"></fu-empty>
      <!---首页房源列表flex布局结束-->


    </view>
    <benben-picker ref="benbenWritePickerCodepicker2" :visible.sync="pickerDiy1719971171261" :label.sync='city'
      :province.sync='address_province' :city.sync='address_city' :area.sync='address_district' mode='region'
      :mask-show='true' :picker-height='88' :hide-area='false' @change="getListFunc()">
      <template #picker-header>
        <view class='flex flex-wrap align-center justify-between Publishlistings_picker2_0'>
          <text @tap="$refs.benbenWritePickerCodepicker2.cancel()">取消</text>
          <text>选择地址</text>
          <text class='Publishlistings_picker2_0_c2' @tap="$refs.benbenWritePickerCodepicker2.pickerConfirm()">确认</text>
        </view>
      </template>
    </benben-picker>
  </page-body>
</template>
<script>
  import {
    validate
  } from '@/common/utils/validate.js'
  import pagingList from '@/common/mixin/paging_list.js';

  export default {
    components: {},
    mixins: [pagingList],

    data() {
      return {
        is_droup: false,

        "state": "0",
        "keywords": "",
        "dataList": [],
        "minixPagingListsApi": "",
        "pageingListApiMethod": "",
        "allowOnloadGetList": false,
        jobarr: [],
        typeaarr: [],
        job_type: '',
        part_job: '',
        salaryrange: [],
        jobsalaryrange_id: '',
        pickerDiy1719971171261: false,
        address_province: '',
        addressSelect: '',
        address_district: '',
        address_city: '',
        city: '',
        areacity: '',

        cityinfo: null,
        cityname: '',
        citycode: '',
        region_code: '',
        lat: '',
        lng: '',
      };
    },
    computed: {

    },
    watch: {},
    onLoad(options) {
      this.getData()
    },
    onUnload() {

    },
    onReady() {

    },
    onShow() {
      let that = this
      if (uni.getStorageSync('cityinfo')) {
        that.cityinfo = JSON.parse(uni.getStorageSync('cityinfo'))
        that.lat = that.cityinfo.lat
        that.lng = that.cityinfo.lng
        that.cityname = that.cityinfo.text
        that.getListFunc()
      } else {
        that.getLocation()
      }
      // if (uni.getStorageSync('cityAddress')) {
      //   this.city = uni.getStorageSync('cityAddress')
      //   console.log('jobAddress', this.city)
      // }
    },
    onHide() {
      // uni.setStorageSync('cityAddress', this.city)
    },
    onResize() {

    },
    onPullDownRefresh() {
      this.job_type = '' //工种
      this.jobsalaryrange_id = '' //工龄
      this.keywords = ''
      this.part_job = ''
      this.getListFunc()
    },
    onReachBottom(e) {

    },
    onPageScroll(e) {

    },
    methods: {
      /**
       * @func 地图选点
       */

      getAdd() {
        let _this = this
        console.log('info4566')
        uni.chooseLocation({
          success: (resule) => {
            console.log(resule, '地图');
            _this.lng = resule.longitude
            _this.lat = resule.latitude
            _this.cityname = resule.name
            let cityall = {
              lat: _this.lat,
              lng: _this.lng,
              text: _this.cityname,
            }
            console.log('lllllll', cityall)
            uni.setStorageSync('cityinfo', JSON.stringify(cityall))
            _this.getListFunc()
            // _this.myAmapFun.getRegeo({
            //   location: resule.longitude + ',' + resule.latitude,
            //   success: (data) => {
            //     //成功回调
            //     let regeoData = data[0].regeocodeData.addressComponent;
            //     _this.location_city = regeoData.city.length ? regeoData.city : '';
            //     _this.location_province = regeoData.province;
            //     _this.location_district = regeoData.district;
            //     console.log(_this.location_province, '回调');

            //   },
            //   fail: (info) => {
            //     //失败回调
            //     console.log('info', info)
            //   },
            //   complete: (complete) => {
            //     console.log('2222', complete)
            //   }
            // })
          },
          fail: (info) => {
            //失败回调
            console.log('info11', info)
          },
          complete: (complete) => {
            console.log('2222', complete)
          }
        })
      },
      getLocation() {
        let that = this
        // #ifdef APP
        uni.getLocation({
          type: 'gcj02',
          geocode: true,
          success: (res) => {
            that.lat = res.latitude;
            that.lng = res.longitude;
            that.cityname = res.address.city;
            let cityall = {
              lat: that.lat,
              lng: that.lng,
              text: that.cityname,
            }
            console.log('lllllll', cityall)
            uni.setStorageSync('cityinfo', JSON.stringify(cityall))
            that.getListFunc()
            return;
          },
          complete: (complete) => {
            console.log('complete', complete)
          }
        })
        // #endif
        // #ifdef H5
        that.getListFunc()
        // #endif

      },
      clearAddress() {
        this.city = ''
        uni.setStorageSync('cityAddress', '')
        this.getListFunc()
      },
      chooseCity() {
        this.getListFunc()
      },
      getData() {
        this.$api.post(global.apiUrls.post66754719b8b1c, {}).then(res => {
          if (res.data.code == 1) {

            this.typeaarr = res.data.data.job_type //工种 job_type_name

            this.jobarr = res.data.data.part_job //性质
          }
        })
        this.$api.post(global.apiUrls.post666c279b47269, {}).then(res => {
          if (res.data.code == 1) {
            this.salaryrange = res.data.data
          }
        })
      },
      search() {
        this.is_droup = false
        this.getListFunc()
      },
      //隐藏下拉容器
      hidedropdownContainerFunc() {
        if (this.is_droup == false) {
          this.is_droup = true;
        } else {
          this.is_droup = false;
        }
      },
      //状态切换
      stateSwitchingFunc(type) {
        this.state = type;
        this.hidedropdownContainerFunc()
      },
      getListFunc() {
        this.minixPagingListsApi = global.apiUrls.post66701b4fd37a1;
        this.pageingListApiMethod = 'post';
        this.allowOnloadGetList = false;
        this.pagingListPostDataContent = {
          job_type: this.job_type, //工种
          jobsalaryrange_id: this.jobsalaryrange_id, //工龄
          keywords: this.keywords,
          part_job: this.part_job,
          city: this.cityname,
          lat: this.lat,
          lng: this.lng,
        }
        this.listData = [];
        this.dataList = this.listData;
        uni.stopPullDownRefresh()
        this.pagingListToggle();
      },
      pagingListPostData() {
        return this.pagingListPostDataContent
      },
    }
  };
</script>
<style lang="scss" scoped>
  .Publishlistings_picker2_0_c2 {
    color: rgba(255, 111, 2, 1);
  }

  .Publishlistings_picker2_0 {
    border-bottom: 1px solid #eee;
    background: #fff;
    padding: 0rpx 32rpx 0rpx 32rpx;
    line-height: 88rpx;
    border-radius: 25rpx 25rpx 0rpx 0rpx;
    background-size: 100% auto !important;
  }

  s .askingResources_flex_2 {
    margin: 10rpx 0rpx 0rpx 0rpx;
  }

  .askingResources_fd2_0_c1_c0_c1 {
    width: 16rpx;
    height: 16rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    margin: 0rpx 0rpx 0rpx 8rpx;
  }

  .askingResources_fd2_0_c1_c0_c0_1 {
    color: #FF6F02;
    font-size: 28rpx;
    font-weight: 400;
    line-height: 32rpx;
  }

  .askingResources_fd2_0_c1 {
    padding: 20rpx 24rpx 20rpx 24rpx;
  }

  .askingResources_fd2_0_c0_c3_c1 {
    background: rgba(1, 129, 255, 1);
    border-radius: 40rpx;
    width: 480rpx;
    line-height: 80rpx;
    font-size: 28rpx;
    color: var(--benbenFontColor3);
  }

  .askingResources_fd2_0_c0_c3_c0 {
    background: rgba(248, 248, 248, 1);
    border-radius: 40rpx;
    width: 190rpx;
    line-height: 80rpx;
    font-size: 28rpx;
    color: rgba(51, 51, 51, 1);
  }

  .askingResources_fd2_0_c0_c3 {
    border-top: 1px solid #eee;
    padding: 8rpx 24rpx 8rpx 24rpx;
  }

  .askingResources_fd2_0_c0_c2_c0_c3_c2_c1 {
    background: rgba(153, 153, 153, 1);
    width: 16rpx;
    height: 1rpx;
    margin: 0rpx 24rpx 0rpx 24rpx;
    transform: scaleY(0.5);
  }

  .askingResources_fd2_0_c0_c2_c0_c3_c2_c0_c0 {
    text-align: center;
  }

  .askingResources_fd2_0_c0_c2_c0_c3_c2_c0 {
    background: rgba(248, 248, 248, 1);
    width: 300rpx;
    height: 64rpx;
    border-radius: 8rpx;
    background-size: 100% auto;
  }

  .askingResources_fd2_0_c0_c2_c0_c1 {
    margin: 40rpx 0rpx 0rpx 0rpx;
  }

  .askingResources_fd2_0_c0_c2_c0_c0_c1_c1_c0 {
    color: #333333;
    font-size: 24rpx;
    font-weight: 400;
    line-height: 24rpx;
  }

  .askingResources_fd2_0_c0_c2_c0_c0_c1_c1 {
    background: rgba(248, 248, 248, 1);
    width: 164rpx;
    height: 64rpx;
    border-radius: 8rpx;
    background-size: 100% auto;
    margin: 24rpx 16rpx 0rpx 0rpx;
  }

  .askingResources_fd2_0_c0_c2_c0_c0_c1_c0_c0 {
    color: rgba(1, 129, 255, 1);
    font-size: 24rpx;
    font-weight: 400;
    line-height: 24rpx;
  }

  .askingResources_fd2_0_c0_c2_c0_c0_c1_c0 {
    background: rgba(1, 129, 255, 0.1);
    width: 164rpx;
    height: 64rpx;
    border-radius: 8rpx;
    background-size: 100% auto;
    margin: 24rpx 16rpx 0rpx 0rpx;
  }

  .askingResources_fd2_0_c0_c2_c0_c0_c0 {
    color: #333333;
    font-size: 28rpx;
    font-weight: 500;
    line-height: 32rpx;
  }

  .askingResources_fd2_0_c0_c2_c0 {
    padding: 0rpx 0rpx 32rpx 24rpx;
  }

  .askingResources_fd2_0_c0_c2 {
    touch-action: none;
    width: 750rpx;
    height: 600rpx;
  }

  .askingResources_fd2_0_c0_c0_c0_c1_c0 {
    color: #333333;
    font-size: 28rpx;
    font-weight: 400;
    line-height: 32rpx;
  }

  .askingResources_fd2_0_c0_c0_c0_c0_c0 {
    color: #FF6F02;
    font-size: 28rpx;
    font-weight: 500;
    line-height: 32rpx;
  }

  .askingResources_fd2_0_c0_c0_c0_c0 {
    margin: 32rpx 0rpx 0rpx 0rpx;
  }

  .askingResources_fd2_0_c0_c0 {
    padding: 0rpx 0rpx 32rpx 0rpx;
    position: relative;
    z-index: 9;
  }

  .askingResources_fd2_0_c0 {
    background: #ffffff;
    width: 750rpx;
    border-radius: 0rpx 0rpx 24rpx 24rpx;
    // position: relative;
    // z-index: 9;
    // &.active {
    //   margin-top: 72rpx;
    // }

  }

  .askingResources_fd2_0 {
    position: relative;
    z-index: 9999;
  }

  .page {
    width: 100vw;
    overflow-x: hidden;
    min-height: calc(100vh - var(--window-bottom));
    background: url(image-path('154.png')) no-repeat;
    background-size: 100% auto;
  }

  .jobDirect_flex_0 {
    background: url(image-path('154.png')) no-repeat;
    width: 750rpx;
    height: 88rpx;
    overflow: hidden;
    z-index: 10;
    top: 0rpx;
    background-size: 100% auto !important;
  }

  .jobDirect_fd0_0_c2_c0 {
    width: 50rpx;
    height: 50rpx;
    margin: 0rpx 0rpx 0rpx 32rpx;
  }

  .jobDirect_fd0_0_c1_c0 {
    font-size: 36rpx;
    color: rgba(16, 16, 16, 1);
    font-weight: 600;
  }

  .jobDirect_fd0_0_c0_c0 {
    width: 40rpx;
    height: 40rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    margin: 0rpx 10rpx 0rpx 0rpx;
  }

  .jobDirect_fd0_0 {
    padding: 0rpx 32rpx 0rpx 32rpx;
    line-height: 88rpx;
    color: #333;
  }

  .jobDirect_fd1_0_c1 {
    background: #FF6F02;
    border-radius: 32rpx 32rpx 32rpx 32rpx;
    width: 116rpx;
    height: 64rpx;
    line-height: 64rpx;
    color: var(--benbenFontColor3);
  }

  .jobDirect_fd1_0_c0_c1 {
    margin: 0rpx 0rpx 0rpx 16rpx;
    color: var(--benbenFontColor2);
  }

  .jobDirect_fd1_0_c0_c0 {
    width: 32rpx;
    height: 32rpx;
  }

  .jobDirect_fd1_0 {
    border: 1px solid #FF6F02;
    background: #FFFFFF;
    width: 690rpx;
    height: 72rpx;
    margin: 24rpx auto 24rpx auto;
    border-radius: 44rpx;
    padding: 0rpx 8rpx 0rpx 24rpx;
  }

  .jobDirect_flex_2 {
    background: #FFFFFF;
    padding: 24rpx 24rpx 0rpx 24rpx;
    border-radius: 16rpx 16rpx 0rpx 0rpx;
    background-size: 100% 100%;
    height: 100%;
    margin: 24rpx 0rpx 0rpx 0rpx;
  }

  .jobDirect_fd2_0_c1_c4_c0 {
    font-size: 24rpx;
  }

  .jobDirect_fd2_0_c1_c3_c0 {
    background: #F2F3F9;
    margin: 0rpx 12rpx 0rpx 0rpx;
    border-radius: 4rpx 4rpx 4rpx 4rpx;
    line-height: 40rpx;
    font-size: 24rpx;
    padding: 0 8rpx;
    height: 40rpx;
    text-align: center;
    color: rgba(93, 114, 169, 1);
  }

  .jobDirect_fd2_0_c1_c3 {
    margin: 8rpx 0rpx 16rpx 0rpx;
  }

  .jobDirect_fd2_0_c1_c2_c0 {
    font-size: 24rpx;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    width: 420rpx;
  }

  .jobDirect_fd2_0_c1_c2 {
    margin: 11rpx 0rpx 10rpx 0rpx;
  }

  .jobDirect_fd2_0_c1_c1_c1 {
    font-size: 22rpx;
    margin: 0rpx 0rpx 0rpx 12rpx;
  }

  .jobDirect_fd2_0_c1_c1_c0 {
    font-size: 36rpx;
  }

  .jobDirect_fd2_0_c1_c1 {
    color: rgba(251, 99, 80, 1);
    margin: 16rpx 0rpx 0rpx 0rpx;
  }

  .jobDirect_fd2_0_c1_c0_c1 {
    color: var(--benbenFontColor2);
    font-size: 24rpx;
  }

  .jobDirect_fd2_0_c1_c0_c0 {
    font-size: 32rpx;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }

  .jobDirect_fd2_0_c1 {
    width: 450rpx;
  }

  .jobDirect_fd2_0_c0_c0 {
    width: 240rpx;
    height: 300rpx;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
  }

  .jobDirect_fd2_0_c0 {
    margin: 0rpx 24rpx 0rpx 0rpx;
    width: 240rpx;
    height: 300rpx;
    position: relative;
  }

  .jobDirect_fd2_0 {
    border-bottom: 1px solid #eee;
    background: #FFFFFF;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    margin: 0rpx 0rpx 24rpx 0rpx;
    padding: 24rpx 0rpx 24rpx 0rpx;
  }
</style>
